<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>当日考勤看板</title>
</head>

<body>
  <div id="app" v-loading.fullscreen.lock="loading">
    <div class="day-attendance-board">
      <div class="title">
        <span class="company">{{comapnyName}}</span>
        <div class="btns">
          <el-button size="small" @click="lookMonthAttendance">查看当月考勤</el-button>
          <el-popover v-if="mode==='table'" v-model="showZoom" placement="bottom" title="缩放表格" width="150" trigger="click">
            <zoom-form v-if="showZoom" v-model="zoom"></zoom-form>
            <el-button slot="reference" size="small">缩放</el-button>
          </el-popover>
          <el-button size="small" @click="toBack">回到首页</el-button>
        </div>
      </div>
      <div class="attendance-board-table-div">
        <el-tabs v-model="activeMenu" class="full-tabs" v-if="menus.length>0">
          <el-tab-pane lazy v-for="menu in menus" :key="menu.name" :label="menu.label" :name="menu.name">
            <component v-if="resSouce!==null" :is="menu.url" class="menu-item" :data="resSouce" :attendances="attendanceList" :zoom="zoom">
              <div class="table-title">
                <span v-if="nowTime!==null">{{moment(nowTime).format('YYYY年MM月DD日')}}</span>
                <span style="line-height: 30px">考勤看板</span>
                <div v-if="nowTime!==null" class="refersh-time">
                  最新更新时间 {{moment(nowTime).format('HH:mm')}}
                </div>
              </div>
            </component>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</body>

<script src="https://upload.shinehao.com.cn/20190223085008echarts.min.4.2.1-rc.1.js"></script>
<script src="../../myJs/importFile.js"></script>
<script>
  importFile([
    "./css/attendanceDetail.css",
    "./css/attendanceTable.css",
    "./css/attendanceChart.css"
  ], [
    "/vueSystem/models/baseModel.js",
    "/vueSystem/mixins/boardRunningMixin.js",
    "/vueSystem/components/sysAutocomplete.js"
  ]);

</script>
<script src="./zoomForm.js"></script>
<script src="./attendanceDetail.js"></script>
<script src="./attendanceTable.js"></script>
<script src="./attendanceChart.js"></script>

<script>
  var app = new Vue({
    el: '#app',

    computed: {
      mode: function () {
        var activeMenu = this.activeMenu;
        return activeMenu === 'attendanceChart' ? 'chart' : 'table';
      }
    },

    data: function () {
      return {
        loading: false,
        basePath: SysUtil.getBasePath(),
        comapnyName: '',
        attendanceList: null,
        resSouce: null,
        nowTime: null,
        timeout: null,
        zoom: this.getZoom(),
        showZoom: false,
        activeMenu: 'attendanceDetail',
        menus: [{
          label: '考勤详细',
          name: 'attendanceDetail',
          url: 'attendance-detail'
        }, {
          label: '考勤汇总',
          name: 'attendanceTable',
          url: 'attendance-table'
        }, {
          label: '考勤图表',
          name: 'attendanceChart',
          url: 'attendance-chart'
        }]
      };
    },

    beforeDestroy: function () {
      this.cleartTimeout();
    },

    created: function () {
      this.loading = true;
      var self = this;
      Promise.all([
        this.setComapnyName(),
        this.setAttendanceList(true)
      ]).then(function () {
        self.loading = false;
        self.boardRunning();
      }).catch(function () {
        self.loading = false;
      });
    },

    methods: {
      setComapnyName: function () {
        var self = this;
        return ajaxRequest('user/getUserName').then(function (user) {
          self.comapnyName = user.company;
          return user;
        });
      },

      setAttendanceList: function (isAlert) {
        if (isAlert === undefined) {
          isAlert = false;
        }

        var self = this;
        return ajaxRequest('attendance/getWorkshopAttendanceBoard', {
          currentDate: 'currentDate'
        }, true, isAlert).then(function (res) {
          var attendanceList = res.workshopAttendBoardList;
          for (var i = 0; i < attendanceList.length; i++) {
            var attendance = attendanceList[i];
            var deptWork = [];
            var deptName = attendance.deptName;
            if (!SysUtil.isEmpty(deptName)) {
              deptWork.push(deptName);
            }
            var workshopName = attendance.workshopName;
            if (!SysUtil.isEmpty(workshopName)) {
              deptWork.push(workshopName);
            }
            attendance.deptWork = deptWork.join('-');
            attendance.rowIndex = i;
          }
          self.attendanceList = attendanceList;
          self.nowTime = moment().valueOf();
          self.resSouce = res;
          return attendanceList;
        }).catch(function () {
          return [];
        });
      },

      boardRunning: function () {
        var tomorrowMoment = moment().add(1, 'day').startOf('day');
        var delayTime = tomorrowMoment.diff(moment());
        delayTime = Math.min(delayTime, 15 * 60 * 1000);
        var self = this;
        var timeout = setTimeout(function () {
          self.setAttendanceList().then(function () {
            self.timeout = null;
            self.boardRunning();
          });
        }, delayTime);
        this.timeout = timeout;
      },

      cleartTimeout: function () {
        var timeout = this.timeout;
        if (timeout !== null) {
          cleartTimeout(timeout);
          this.timeout = null;
        }
      },

      changeMode: function () {
        var mode = this.mode;
        if (mode === 'table') {
          mode = 'chart';
          this.showZoom = false;
        } else {
          mode = 'table';
        }
        this.mode = mode;
      },

      toBack: function () {
        var basePath = this.basePath;
        location.href = basePath + "/datav/index.html?autoLogin=autoLogin";
      },

      lookMonthAttendance: function () {
        var basePath = this.basePath;
        location.href = basePath + "/attendanceMgr/attendanceBoard/index.html?autoLogin=autoLogin";
      },

      getZoom: function () {
        var zoom = window.localStorage.getItem('dayAttendanceBoard-zoom');
        if (SysUtil.isEmpty(zoom)) {
          zoom = 1;
        } else {
          zoom = Number(zoom);
        }

        return zoom;
      }
    },

    components: {
      AttendanceDetail: AttendanceDetail,
      AttendanceChart: AttendanceChart,
      AttendanceTable: AttendanceTable,
      ZoomForm: ZoomForm
    }
  });

</script>

<style>
  .day-attendance-board {
    width: 100%;
    height: 100%;
    background: #0E2A43;
  }

  .day-attendance-board .title {
    height: 43px;
    text-align: center;
    background-size: 176px 40px;
    background-repeat: no-repeat;
    background-color: #000;
    position: relative;
  }

  .day-attendance-board .title .company {
    color: #ffffff;
    font-size: 20px;
    line-height: 43px;
  }

  .day-attendance-board .title .btns {
    position: absolute;
    right: 10px;
    top: 0;
    padding-top: 5px;
  }

  .day-attendance-board .title .btns .el-button+.el-button {
    margin-left: 0;
  }

  .day-attendance-board .attendance-board-table-div {
    min-width: 400px;
    padding-left: 20px;
    height: calc(100% - 43px);
  }

  .day-attendance-board .attendance-board-table-div .el-tabs__item {
    color: #ffffff;
  }

  .day-attendance-board .menu-item .table-title {
    color: #ffffff;
    margin-bottom: 10px;
    font-size: 18px;
    text-align: center;
    position: relative;
    height: 30px;
  }

  .day-attendance-board .menu-item .refersh-time {
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 14px;
  }

</style>

</html>
